﻿@page "/components/propanel"

<PageOutlet Url="components/ProPanel"
            Title="ProPanel"
            Description="propanel component of the bit BlazorUI components" />

<div>
    <DemoPage Name="ProPanel"
              Description="ProPanel is an advanced version of normal Panel with additional features that tailored to more usual use-cases."
              Parameters="componentParameters"
              SubClasses="componentSubClasses"
              SubEnums="componentSubEnums"
              GitHubExtrasUrl="ProPanel/BitProPanel.razor"
              GitHubDemoUrl="Extras/ProPanel/BitProPanelDemo.razor">
        <NotesTemplate>
            <BitText>
                To use this component, you need to install the
                <BitLink Href="https://www.nuget.org/packages/Bit.BlazorUI.Extras" Target="_blank">
                    <BitTag Reversed
                            Text="Bit.BlazorUI.Extras"
                            Color="BitColor.SecondaryBackground"
                            IconName="@BitIconName.NavigateExternalInline" />
                </BitLink>
                nuget package, as described in the Optional steps of the
                <BitLink Href="/getting-started">Getting started</BitLink> page.
            </BitText>
        </NotesTemplate>
        <Examples>
            <DemoExample Title="Basic" RazorCode="@example1RazorCode" CsharpCode="@example1CsharpCode" Id="example1">
                <BitButton OnClick="() => isBasicProPanelOpen = true">Open ProPanel</BitButton>
                <BitProPanel @bind-IsOpen="isBasicProPanelOpen">
                    <div style="max-width:300px">
                        Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams. 
                        Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment 
                        when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth, 
                        for ideas that change minds and spark emotions. This is where the journey begins—your words will lead the way.
                    </div>
                </BitProPanel>
            </DemoExample>

            <DemoExample Title="Header & Footer" RazorCode="@example2RazorCode" CsharpCode="@example2CsharpCode" Id="example2">
                <BitButton OnClick="() => isProPanelWithHeaderTextOpen = true">Open ProPanel with HeaderText</BitButton>
                <BitProPanel @bind-IsOpen="isProPanelWithHeaderTextOpen" HeaderText="BitProPanel with HeaderText">
                    <div style="max-width:300px">
                        Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams. 
                        These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape. 
                        Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and 
                        inspirations will be built. Soon, these lines will transform into narratives that provoke thought, 
                        spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty 
                        in potential—the quiet magic of beginnings, where everything is still to come, and the possibilities 
                        are boundless. This space is yours to craft, yours to shape, yours to bring to life.
                    </div>
                </BitProPanel>
                <br />
                <BitButton OnClick="() => isProPanelWithHeaderOpen = true">Open ProPanel with Header</BitButton>
                <BitProPanel @bind-IsOpen="isProPanelWithHeaderOpen">
                    <Header>
                        <div>
                            <div style="margin-bottom:4px">BitProPanel with Header</div>
                            <BitSearchBox Placeholder="Search here..." />
                        </div>
                    </Header>
                    <Body>
                        <div style="max-width:300px">
                            Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams. 
                            These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape. 
                            Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and 
                            inspirations will be built. Soon, these lines will transform into narratives that provoke thought, 
                            spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty 
                            in potential—the quiet magic of beginnings, where everything is still to come, and the possibilities 
                            are boundless. This space is yours to craft, yours to shape, yours to bring to life.
                        </div>
                    </Body>
                </BitProPanel>
                <br /><br /><br />
                <BitButton OnClick="() => isProPanelWithFooterTextOpen = true">Open ProPanel with FooterText</BitButton>
                <BitProPanel @bind-IsOpen="isProPanelWithFooterTextOpen" FooterText="BitProPanel with FooterText">
                    <div style="max-width:300px">
                        In the beginning, there is silence—a blank canvas yearning to be filled, a quiet space where creativity waits 
                        to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite 
                        possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the 
                        vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be 
                        shaped into meaning, and the emotions ready to resonate with every reader.
                        In this space, potential reigns supreme. It is a moment suspended in time, where imagination dances freely and 
                        each word has the power to transform into something extraordinary. Here lies the start of something new—an 
                        opportunity to craft, inspire, and create. Whether it's a tale of adventure, a reflection of truth, or an 
                        idea that sparks change, these lines are yours to fill, to shape, and to make uniquely yours. The journey 
                        begins here, in this quiet moment where everything is possible.
                    </div>
                </BitProPanel>
                <br />
                <BitButton OnClick="() => isProPanelWithFooterOpen = true">Open ProPanel with Footer</BitButton>
                <BitProPanel @bind-IsOpen="isProPanelWithFooterOpen">
                    <Body>
                        <div style="max-width:300px">
                            In the beginning, there is silence—a blank canvas yearning to be filled, a quiet space where creativity waits 
                            to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite 
                            possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the 
                            vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be 
                            shaped into meaning, and the emotions ready to resonate with every reader.
                            In this space, potential reigns supreme. It is a moment suspended in time, where imagination dances freely and 
                            each word has the power to transform into something extraordinary. Here lies the start of something new—an 
                            opportunity to craft, inspire, and create. Whether it's a tale of adventure, a reflection of truth, or an 
                            idea that sparks change, these lines are yours to fill, to shape, and to make uniquely yours. The journey 
                            begins here, in this quiet moment where everything is possible.
                        </div>
                    </Body>
                    <Footer>
                        <h3 style="margin-bottom:4px">BitProPanel with Footer</h3>
                        <BitButton OnClick="() => isProPanelWithFooterOpen = false">Save</BitButton>
                        <BitButton OnClick="() => isProPanelWithFooterOpen = false" Variant="BitVariant.Outline">Close</BitButton>
                    </Footer>
                </BitProPanel>
            </DemoExample>

            <DemoExample Title="Advanced options" RazorCode="@example3RazorCode" CsharpCode="@example3CsharpCode" Id="example3">
                <div>BitProPanel has some advanced options to be customized.</div>
                <br /><br />
                <BitButton OnClick="() => bitProPanelRef.Open()">Open ProPanel with ShowCloseButton</BitButton>
                <BitProPanel @ref="bitProPanelRef" HeaderText="ShowCloseButton" ShowCloseButton>
                    <div style="max-width:300px">
                        Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams. 
                        Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment 
                        when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth, 
                        for ideas that change minds and spark emotions. This is where the journey begins—your words will lead the way.
                    </div>
                </BitProPanel>
                <br /><br /><br />
                <BitButton OnClick="() => isBlockingProPanelOpen = true">Open ProPanel with Blocking</BitButton>
                <BitProPanel @bind-IsOpen="isBlockingProPanelOpen" HeaderText="Blocking" ShowCloseButton Blocking>
                    <div style="max-width:300px">
                        Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams. 
                        Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment 
                        when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth, 
                        for ideas that change minds and spark emotions. This is where the journey begins—your words will lead the way.
                    </div>
                </BitProPanel>
                <br /><br /><br />
                <BitButton OnClick="() => isModelessProPanelOpen = !isModelessProPanelOpen">Toggle ProPanel with Modeless</BitButton>
                <BitProPanel @bind-IsOpen="isModelessProPanelOpen" HeaderText="Modeless" ShowCloseButton Modeless>
                    <div style="max-width:300px">
                        Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams. 
                        Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment 
                        when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth, 
                        for ideas that change minds and spark emotions. This is where the journey begins—your words will lead the way.
                    </div>
                </BitProPanel>
                <br /><br /><br />
                <BitButton OnClick="() => isModeFullProPanelOpen = true">Open ProPanel with ModeFull</BitButton>
                <BitProPanel @bind-IsOpen="isModeFullProPanelOpen" HeaderText="ModeFull" ShowCloseButton ModeFull>
                    <div style="max-width:300px">
                        Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams. 
                        Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment 
                        when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth, 
                        for ideas that change minds and spark emotions. This is where the journey begins—your words will lead the way.
                    </div>
                </BitProPanel>
                <br /><br /><br />
                <BitButton OnClick="() => isAutoToggleScrollProPanelOpen = true">Open ProPanel with AutoToggleScroll</BitButton>
                <BitProPanel @bind-IsOpen="isAutoToggleScrollProPanelOpen" HeaderText="AutoToggleScroll" AutoToggleScroll>
                    <div style="max-width:300px">
                        Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams. 
                        Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment 
                        when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth, 
                        for ideas that change minds and spark emotions. This is where the journey begins—your words will lead the way.
                    </div>
                </BitProPanel>
            </DemoExample>

            <DemoExample Title="Position and size" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4">
                <div>To set the Panel position on the page you can use the Position parameter.</div>
                <br /><br />
                <div class="position-btn">
                    <BitNumberField @bind-Value="customProPanelSize" Mode="BitSpinButtonMode.Inline" Label="Custom size" />
                    <div>
                        <BitButton OnClick="() => isStartProPanelOpen = true">Start</BitButton>
                        <BitButton OnClick="() => isEndProPanelOpen = true">End</BitButton>
                    </div>
                    <div>
                        <BitButton OnClick="() => isTopProPanelOpen = true">Top</BitButton>
                        <BitButton OnClick="() => isBottomProPanelOpen = true">Bottom</BitButton>
                    </div>
                </div>

                <BitProPanel @bind-Size="customProPanelSize"
                             @bind-IsOpen="isStartProPanelOpen"
                             HeaderText="Start BitProPanel"
                             Position="BitPanelPosition.Start">
                    BitProPanel with Start position and custom Size.
                    <BitNumberField @bind-Value="customProPanelSize" Mode="BitSpinButtonMode.Inline" Label="Custom size" />
                    Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams. 
                    Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment 
                    when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth, 
                    for ideas that change minds and spark emotions. This is where the journey begins—your words will lead the way.
                </BitProPanel>

                <BitProPanel @bind-Size="customProPanelSize"
                             @bind-IsOpen="isEndProPanelOpen"
                             HeaderText="End BitProPanel"
                             Position="BitPanelPosition.End">
                    BitProPanel with End position and custom Size.
                    <BitNumberField @bind-Value="customProPanelSize" Mode="BitSpinButtonMode.Inline" Label="Custom size" />
                    Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams. 
                    Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment 
                    when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth, 
                    for ideas that change minds and spark emotions. This is where the journey begins—your words will lead the way.
                </BitProPanel>

                <BitProPanel @bind-Size="customProPanelSize"
                             @bind-IsOpen="isTopProPanelOpen"
                             HeaderText="Top BitProPanel"
                             Position="BitPanelPosition.Top">
                    BitProPanel with Top position and custom Size.
                    <BitNumberField @bind-Value="customProPanelSize" Mode="BitSpinButtonMode.Inline" Label="Custom size" />
                    Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams. 
                    Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment 
                    when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth, 
                    for ideas that change minds and spark emotions. This is where the journey begins—your words will lead the way.
                </BitProPanel>

                <BitProPanel @bind-Size="customProPanelSize"
                             @bind-IsOpen="isBottomProPanelOpen"
                             HeaderText="Bottom BitProPanel"
                             Position="BitPanelPosition.Bottom">
                    BitProPanel with Bottom position and custom Size.
                    <BitNumberField @bind-Value="customProPanelSize" Mode="BitSpinButtonMode.Inline" Label="Custom size" />
                    Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams. 
                    Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment 
                    when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth, 
                    for ideas that change minds and spark emotions. This is where the journey begins—your words will lead the way.
                </BitProPanel>
            </DemoExample>

            <DemoExample Title="Events" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5">
                <div>Explore different events available in the BitProPanel component:</div>
                <br /><br />
                <div>OnOpen:</div><br />
                <BitButton OnClick="() => isOnOpenProPanelOpen = true">Open OnOpen ProPanel</BitButton>
                <BitProPanel @bind-IsOpen="isOnOpenProPanelOpen" OnOpen="() => onOpenTextFieldRef.FocusAsync()">
                    <div style="max-width:300px">
                        Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams. 
                        Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment 
                        when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth, 
                        for ideas that change minds and spark emotions. This is where the journey begins—your words will lead the way.
                        <br /><br />
                        The following text field will be focused on open:
                        <br /><br />
                        <BitTextField @ref="onOpenTextFieldRef" />
                    </div>
                </BitProPanel>
                <br /><br /><br /><br />
                <div>OnDismiss:</div><br />
                <BitButton OnClick="() => isOnDismissProPanelOpen = true">Open OnDismiss ProPanel</BitButton>
                <br /><br />
                <BitTextField @ref="onDismissTextFieldRef" Placeholder="This will be focused on dismiss..." />
                <BitProPanel @bind-IsOpen="isOnDismissProPanelOpen" OnDismiss="() => onDismissTextFieldRef.FocusAsync()">
                    <div style="max-width:300px">
                        Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams. 
                        Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment 
                        when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth, 
                        for ideas that change minds and spark emotions. This is where the journey begins—your words will lead the way.
                    </div>
                </BitProPanel>
            </DemoExample>

            <DemoExample Title="Style & Class" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6">
                <div>Explore styling and class customization for BitProPanel, including component styles, custom classes, and detailed styles.</div>
                <br /><br />
                <div>Component's Style & Class:</div><br />
                <BitButton OnClick="() => isStyledProPanelOpen = true">Open Styled ProPanel</BitButton>
                <BitProPanel @bind-IsOpen="isStyledProPanelOpen" HeaderText="Style" ShowCloseButton Style="font-size: 3rem;">
                    BitProPanel with custom style.
                </BitProPanel>
                <br /><br />
                <BitButton OnClick="() => isClassedProPanelOpen = true">Open Classed ProPanel</BitButton>
                <BitProPanel @bind-IsOpen="isClassedProPanelOpen" HeaderText="Class" ShowCloseButton Class="custom-class">
                    BitProPanel with custom class:
                    <div class="item">Item 1</div>
                    <div class="item">Item 2</div>
                    <div class="item">Item 3</div>

                    <div style="max-width:300px">
                        Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams. 
                        Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment 
                        when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth, 
                        for ideas that change minds and spark emotions. This is where the journey begins—your words will lead the way.
                    </div>
                </BitProPanel>
                <br /><br /><br />
                <div><b>Styles</b> & <b>Classes</b>:</div><br />
                <BitButton OnClick="() => isProPanelStylesOpen = true">Open ProPanel Styles</BitButton>
                <BitProPanel @bind-IsOpen="isProPanelStylesOpen"
                             HeaderText="Styles" ShowCloseButton
                             Styles="@(new() { Overlay = "background-color: #4776f433;",
                                               Container = "box-shadow: 0 0 1rem tomato;" })">
                    BitProPanel with <b>Styles</b> to customize its elements.
                    <div style="max-width:300px">
                        Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams. 
                        Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment 
                        when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth, 
                        for ideas that change minds and spark emotions. This is where the journey begins—your words will lead the way.
                    </div>
                </BitProPanel>
                <br /><br />
                <BitButton OnClick="() => isProPanelClassesOpen = true">Open ProPanel Classes</BitButton>
                <BitProPanel @bind-IsOpen="isProPanelClassesOpen"
                             HeaderText="Classes" ShowCloseButton
                             FooterText="This is a footer text!"
                             Classes="@(new() { Container = "custom-container",
                                                Overlay = "custom-overlay",
                                                HeaderContainer = "custom-header-container",
                                                Header = "custom-header",
                                                Body = "custom-body",
                                                Footer = "custom-footer" })">
                    BitProPanel with <b>Classes</b> to customize its elements.
                    <div style="max-width:300px">
                        Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams. 
                        Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment 
                        when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth, 
                        for ideas that change minds and spark emotions. This is where the journey begins—your words will lead the way.
                    </div>
                </BitProPanel>
            </DemoExample>

            <DemoExample Title="RTL" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">
                <div>Use BitProPanel in right-to-left (RTL).</div>
                <br /><br />
                <div>
                    <div class="position-btn" dir="rtl">
                        <div>
                            <BitButton OnClick="() => isRtlProPanelOpenStart = true">آغاز</BitButton>
                            <BitButton OnClick="() => isRtlProPanelOpenEnd = true">پایان</BitButton>
                        </div>
                    </div>

                    <BitProPanel @bind-IsOpen="isRtlProPanelOpenStart"
                                 Dir="BitDir.Rtl"
                                 HeaderText="سرصفحه ی آغاز"
                                 Position="BitPanelPosition.Start">
                        <div style="max-width:300px">
                            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
                            چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
                            کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
                            در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
                        </div>
                    </BitProPanel>

                    <BitProPanel @bind-IsOpen="isRtlProPanelOpenEnd"
                                 Dir="BitDir.Rtl"
                                 HeaderText="سرصفحه ی پایان"
                                 Position="BitPanelPosition.End">
                        <div style="max-width:300px">
                            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
                            چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
                            کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
                            در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
                        </div>
                    </BitProPanel>
                </div>
            </DemoExample>
        </Examples>
    </DemoPage>
</div>